<template>
  

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div class="one">
        <div class="two-left">
               <!-- 基本信息 -->
            <div class="essential">
              <p>基本信息</p>
              <div class="essential-information">
                <div class="essential-left">
                  <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>

                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="身份证号" prop="IdNumber" required>
                        <el-input v-model="ruleForm.IdNumber"></el-input>
                  </el-form-item>

                </div>
                <div class="essential-right">
                  <el-form-item label="籍贯" prop="address" required>
                    <el-cascader
                        v-model="ruleForm.address"
                        :options="options"></el-cascader>
                  </el-form-item>
                    <el-form-item label="出生日期" required>
                        <el-col :span="11">
                        <el-form-item prop="dateOfBirth">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.dateOfBirth" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                        </el-col>
                    </el-form-item>
                </div>
                </div>
            </div>

            <!-- 联系方式 -->
            
            <div class="contact">
              <p>联系方式</p>
              <div class="contact-information">
                <div class="contact-left">
                    <el-form-item
                      prop="email"
                      label="邮箱"
                      :rules="[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                      ]"
                    >
                      <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>

                    <el-form-item label="家庭住址" prop="HomeAddress" required>
                    <el-cascader
                        v-model="ruleForm.HomeAddress"
                        :options="options"></el-cascader>
                  </el-form-item>


                    <el-form-item label="手机" prop="cellPhoneNumber">
                        <el-input v-model="ruleForm.cellPhoneNumber"></el-input>
                  </el-form-item>

                </div>
                <div class="contact-right">
                  <el-form-item label="QQ" prop="qq">
                        <el-input v-model="ruleForm.qq"></el-input>
                  </el-form-item>
                  <el-form-item label="微信" prop="WeChat">
                        <el-input v-model="ruleForm.WeChat"></el-input>
                  </el-form-item>
                </div>
                </div>
            </div>
            <!-- 其他信息 -->
            
            <div class="other">
              <p>其他信息</p>
              <div class="other-information">
                <div class="contact-left">
                    <el-form-item label="所属部门" prop="department">
                        <el-input v-model="ruleForm.department"></el-input>
                  </el-form-item>

                  <el-form-item label="登陆密码" prop="pwd">
                        <el-input v-model="ruleForm.pwd"></el-input>
                  </el-form-item>

                  <el-form-item label="紧急联系人" prop="emergencyContact">
                        <el-input v-model="ruleForm.emergencyContact"></el-input>
                  </el-form-item>
                </div>
                <div class="contact-right">
                      <el-form-item label="加入日期" required>
                        <el-col :span="11">
                        <el-form-item prop="dateOfAccession">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.dateOfAccession" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                        </el-col>
                      </el-form-item>
                    <el-form-item label="确认密码" prop="repwd">
                          <el-input v-model="ruleForm.repwd"></el-input>
                    </el-form-item>
                </div>
              </div> 
            </div>
            <!-- 提交 -->
          <div class="tijiao">
            <el-form-item>
            <el-button @click="resetForm('ruleForm')" class="quxiao">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" class="baocun">保存</el-button>
            
          </el-form-item>
          </div>
        </div>
        <div class="two-right">
<div class="shangchuan">上传照片:</div>
          <div class="pic">
            
         <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
     </div>
    <el-button @click="save" class="savePic">确定上传照片</el-button>
         
         <div class="geshi">单文件大小请在1M以内，仅支持JPG、JPEG、PNG格式</div>
        </div>
      </div>
    </el-form>

</template>

<script>
import area from '../../../../assets/datas/area.json' //json文件的引用和使用和图片一样
import { addTeacher } from '../../../../api/addTeacher'
  export default {
    data() {
      return {
        options: area,
        ruleForm: {
          name: '',
          sex: '',
          IdNumber:'',
          address:'',
          dateOfBirth: '',
          email:'',
          HomeAddress:'',
          cellPhoneNumber:'',
          qq:'',
          WeChat:'',
          department:'',
          pwd:'',
          emergencyContact:'',
          dateOfAccession:'',
          repwd:'', 
        },
        dialogImageUrl: '',
        dialogVisible: false,
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          IdNumber: [
            { required: true, message: '请输入身份证号', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入籍贯', trigger: 'blur' }
          ],
          dateOfBirth: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          HomeAddress: [
            { required: true, message: '请输入家庭住址', trigger: 'blur' }
          ],
          cellPhoneNumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          qq: [
            { required: true, message: '请输入QQ号', trigger: 'blur' }
          ],
          WeChat: [
            { required: true, message: '请输入微信号', trigger: 'blur' }
          ],
          department: [
            { required: true, message: '请输入所属部门', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          emergencyContact: [
            { required: true, message: '请输入紧急联系人', trigger: 'blur' }
          ],
          dateOfAccession: [
            { type: 'date', required: true, message: '请选择加入日期', trigger: 'change' }
          ],
          repwd: [
            { required: true, message: '请再次输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    
    methods: {
      
       getAddressFun(val, opt){
         return val.map(function (value, index, array) {
                for (var item of opt) {
                    if (item.value == value) { 
                        opt = item.children; 
                        return item.label; 
                    }
                }
                return null;
            });
       },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             let address = this.ruleForm.address
             let HomeAddress = this.ruleForm.HomeAddress

            //["140000", "140300", "140311   ----- [北京市，北京市，昌平区]
            address = this.getAddressFun(address,this.options)
            HomeAddress = this.getAddressFun(HomeAddress,this.options)
            address = address.join(' ')
            HomeAddress = HomeAddress.join(' ')
            this.ruleForm.address = address
            this.ruleForm.HomeAddress = HomeAddress
            // 发送Ajax
            addTeacher(this.ruleForm).then(res=>{
              console.log('添加新教师',res)
            })
            console.log(this.ruleForm)//获取到的信息
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 让照片变大
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      save(){
        console.log('保存',this.dialogImageUrl)//后端保存的是图片的url
      }
    }
      
    }
  
</script>

<style lang="less" scoped>
.geshi{
  font-size: 12px;
  position: absolute;
  top: 354px;
  left: 20px;

}
.shanchuan{
  position: relative;
  left: 10%;
  // right: 50%;
  // transform: translateX(-50%);
  margin-top: 39px;
}
.one{
  display: flex;
  justify-content: space-between;
  width: 1140px;
  
}
.two-left{
  // width: 746px;
  height: 762px;
}
.two-right{
  width: 326px;
  position: relative;
  margin-left: 20px;
  background: #fff;
  border-radius: 8px;

}
p{
  font-size: 18px;
}
.essential{
  width: 774px;
  height: 223px;
  padding-top: 17px;
  padding-left: 16px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 8px;
}
.contact{
  width: 774px;
  height: 224px;
  padding-top: 17px;
  padding-left: 16px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 8px;


}
.other{
  width: 774px;
  height: 223px;
  padding-top: 17px;
  padding-left: 16px;
  background: #fff;
  border-radius: 8px;

}


.essential-information{

  display: flex;
  justify-content: space-evenly;
  margin-top: 16px;
  
}
.contact-information{
    justify-content: space-evenly;

  display: flex;
  margin-top: 16px;

}
.other-information{
    justify-content: space-evenly;

  display: flex;
  margin-top: 16px;

}
.tijiao{
  float: right;
  margin-top: 30px;
  .baocun{
    width: 222px;
    height: 40px;
    margin-left: 54px;
  }
}
.two-right>.pic{
  position: relative;
  left: 26%;
  right: 50%;
  width: 200px;
  height: 150px;
  // overflow: hidden;
  // transform: translateX(27%);
  // margin-left: 80px ;
  margin-top: 50px;
  overflow: hidden;
}
.shangchuan{
  // margin-top: 1px;
    padding: 44px 0 0 30px;
  }
</style>
<style lang="less" >
.savePic{
  position: absolute;
  top: 300px;
  left: 110px;
  width: 96px;
  height: 25px;
  border-color: #05d1c3;
  border-radius: 140px !important;
  span{
        position: absolute;
    top: 5px;
    left: 7px;
  }
}
.quxiao{
  background: #9a9a9a;
  span{
  color: rgb(255, 255, 255) !important;
    
  }
}
.baocun{
  span{
  color: rgb(255, 255, 255) !important;
    
  }
}
.el-input__inner{
  width: 210px;
  height: 30px;
}
</style>